<template>
  <div class="repayment-application-container">
    <div class="title">
      Submit Repayment
    </div>

    <a-divider />

    <Promised :promise="repaymentsAsync">
      <template v-slot:pending>
        <a-skeleton
          :paragraph="{
            rows: 10
          }"
          active
        />
      </template>
      <template v-slot>
        <section>
          <div class="repayment-container">
            <div class="header-container">
              <div class="text">
                待还总额：${{ repayments.amount }}（手续费${{ repayments.charges }}），请选择还款期数
              </div>
              <a-button
                type="primary"
                @click="selectAll"
              >
                全选
              </a-button>
            </div>

            <Repayments
              ref="repaymentsRef"
              :data="repayments.new_list"
              @settlement="handlerSettlement"
            />

            <div class="computed-container">
              本次还款总额：${{ settlement.amount }}，本次还款总期数：{{ settlement.stage }}期
            </div>

            <div class="button-submit">
              <a-button
                type="primary"
                size="large"
                class="primary-button"
                :disabled="repaymentDisabled"
                :loading="formLoading"
                @click="submitRepayment"
              >
                Submit
              </a-button>
            </div>
          </div>
        </section>
      </template>
    </Promised>
  </div>
</template>

<script>
import Repayments from './components/Table';
import repayment from './repayment';
import work from './work';

export default {

  components: {
    Repayments
  },
  mixins: [repayment, work],

  computed: {
    tid() {
      return this.$route.params.tid;
    }
  }
};
</script>

<style lang="scss" scoped>
.repayment-application-container {
  background-color: $white;
  // padding-top: 48px;
  padding-bottom: 72px;
  & > .title {
    text-align: center;
    font-size: 40px;
    padding-top: $padding-lg;
    margin-bottom: $margin-lg;
    font-weight: bold;
  }

  .repayment-container {
    padding: 0 $padding-lg;
    .header-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
      font-size: $font-size-lg;
      margin-bottom: $margin-xs;
    }
  }

  .computed-container {
    font-size: $font-size-lg;
    margin-bottom: $margin-xs;
    font-weight: bold;
  }

  .button-submit {
    display: flex;
    justify-content: center;
    margin-top: $margin-lg;
    .primary-button {
      width: 420px;
      font-size: $font-size-lg;
    }
  }
}
</style>
